<template>
    <div>
        <div class="wrap">
            <!-- 顶部结构 -->
            <div class="top">
                <div class="hosname">{{ workDate.baseMap?.hosname }}</div>
                <div class="line"></div>
                <div>{{ workDate.baseMap?.bigname }}</div>
                <div class="dot">·</div>
                <div class="hosdepartment">{{ workDate.baseMap?.depname }}</div>

            </div>
            <!-- 中部展示日期结构 -->
            <div class="center">
                <h1 class="time">{{ workDate.baseMap?.workDateString }}</h1>
                <div class="container">
                    <div class="item"
                        :class="{ active: item.status == -1 || item.availableNumber == -1, cur: item.workDate == workTime.workDate }"
                        v-for="item in workDate.bookingScheduleList" :key="workDate.total" @click="changeTime(item)">
                        <div class="top1">{{ item.workDate }}-{{ item.dayOfWeek }}</div>
                        <div class="bottom">
                            <div v-if="item.status == -1">停止挂号</div>
                            <div v-if="item.status == 0">
                                {{ item.availableNumber == -1 ? '约满了' : `有号（${item.availableNumber}）` }}
                            </div>
                            <div v-if="item.status == 1">即将放号</div>

                        </div>
                    </div>

                </div>
                <el-pagination v-model:current-page="pageNo" layout="prev, pager, next" :total="workDate.total"
                    @current-change="fetchWorkData" />
            </div>
            <!-- 底部展示医生的结构 -->
            <div class="docbottom">
                <!-- 展示即将放号的时间 -->
                <div class="will" v-if="workTime.status == 1">
                    <span>{{ workDate.bookingScheduleList[4].workDate}}</span>
                    
                    <span>放号</span>
                </div>
                <!-- 展示医生的结构：上午、下午 -->
                <div class="doc" v-else>
                    <div class="mor">
                        <div class="tips">
                            <svg t="1688698639912" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="3047" width="16" height="16">
                                <path
                                    d="M513.123 795.991c-76.156 0-147.753-29.658-201.603-83.508-53.849-53.849-83.504-125.444-83.504-201.596 0-76.153 29.657-147.749 83.504-201.598 53.85-53.851 125.446-83.508 201.603-83.508 76.147 0 147.742 29.658 201.593 83.508 53.853 53.852 83.511 125.447 83.511 201.598s-29.659 147.747-83.511 201.597c-53.852 53.85-125.445 83.507-201.593 83.507zM513.123 272.352c-131.529 0-238.534 107.007-238.534 238.535s107.006 238.533 238.534 238.533 238.533-107.005 238.533-238.533c0-131.529-107.006-238.535-238.533-238.535z"
                                    fill="#1296db" p-id="3048"></path>
                                <path
                                    d="M513.123 149.007c-12.861 0-23.285-10.426-23.285-23.285v-91.359c0-12.861 10.426-23.285 23.285-23.285s23.285 10.426 23.285 23.285v91.358c0 12.862-10.426 23.286-23.285 23.286z"
                                    fill="#1296db" p-id="3049"></path>
                                <path
                                    d="M513.123 1010.674c-12.861 0-23.285-10.426-23.285-23.285v-91.346c0-12.861 10.426-23.285 23.285-23.285s23.285 10.426 23.285 23.285v91.346c0 12.861-10.426 23.285-23.285 23.285z"
                                    fill="#1296db" p-id="3050"></path>
                                <path
                                    d="M240.764 261.825c-5.959 0-11.919-2.274-16.466-6.821l-64.592-64.591c-9.094-9.093-9.094-23.838 0-32.931 9.093-9.094 23.838-9.094 32.931 0l64.593 64.592c9.094 9.093 9.094 23.838 0 32.931-4.546 4.545-10.507 6.82-16.467 6.82z"
                                    fill="#1296db" p-id="3051"></path>
                                <path
                                    d="M850.050 871.111c-5.958 0-11.919-2.272-16.467-6.82l-64.593-64.593c-9.093-9.094-9.093-23.839 0-32.932 9.094-9.094 23.839-9.094 32.932 0l64.593 64.593c9.093 9.094 9.093 23.839 0 32.932-4.546 4.545-10.507 6.82-16.466 6.82z"
                                    fill="#1296db" p-id="3052"></path>
                                <path
                                    d="M36.59 534.183c-12.861 0.001-23.286-10.423-23.289-23.283-0.001-12.861 10.423-23.286 23.283-23.289l91.348-0.011c12.861-0.001 23.286 10.423 23.289 23.283 0.001 12.861-10.423 23.286-23.283 23.289l-91.348 0.011z"
                                    fill="#1296db" p-id="3053"></path>
                                <path
                                    d="M989.613 534.173h-91.346c-12.861 0-23.285-10.426-23.285-23.285s10.426-23.285 23.285-23.285h91.346c12.861 0 23.285 10.426 23.285 23.285s-10.426 23.285-23.285 23.285z"
                                    fill="#1296db" p-id="3054"></path>
                                <path
                                    d="M176.173 871.122c-5.959 0-11.919-2.272-16.466-6.82-9.094-9.094-9.094-23.839 0-32.932l64.593-64.593c9.094-9.094 23.838-9.094 32.931 0s9.094 23.839 0 32.932l-64.593 64.593c-4.546 4.546-10.506 6.82-16.466 6.82z"
                                    fill="#1296db" p-id="3055"></path>
                                <path
                                    d="M785.457 261.825c-5.959 0-11.918-2.272-16.467-6.821-9.094-9.094-9.093-23.838 0.001-32.931l64.593-64.592c9.094-9.093 23.838-9.094 32.931 0s9.093 23.838-0.001 32.931l-64.593 64.592c-4.545 4.546-10.506 6.821-16.465 6.821z"
                                    fill="#1296db" p-id="3056"></path>
                            </svg><span>上午号源</span>
                        </div>
                        <div class="doc_info" v-for="doctor in morningArr" :key="doctor.id">
                            <!-- 展示医生名字和技能 -->
                            <div class="left">
                                <div class="info">
                                    <span>{{ doctor.title }}</span>
                                    <span>|</span>
                                    <span>{{ doctor.docname }}</span>
                                </div>
                                <div class="skill">
                                    <span>{{ doctor.skill }}</span>
                                </div>
                            </div>
                            <!-- 右侧展示挂号和钱数 -->
                            <div class="right">
                                <div class="money">${{ doctor.amount }}</div>
                                <el-button type="primary" size="default" @click="goStep2(doctor)">{{ doctor.availableNumber }}个名额</el-button>
                            </div>
                        </div>


                    </div>
                    <div class="mor">
                        <div class="tips">
                            <svg t="1688698639912" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="3047" width="16" height="16">
                                <path
                                    d="M513.123 795.991c-76.156 0-147.753-29.658-201.603-83.508-53.849-53.849-83.504-125.444-83.504-201.596 0-76.153 29.657-147.749 83.504-201.598 53.85-53.851 125.446-83.508 201.603-83.508 76.147 0 147.742 29.658 201.593 83.508 53.853 53.852 83.511 125.447 83.511 201.598s-29.659 147.747-83.511 201.597c-53.852 53.85-125.445 83.507-201.593 83.507zM513.123 272.352c-131.529 0-238.534 107.007-238.534 238.535s107.006 238.533 238.534 238.533 238.533-107.005 238.533-238.533c0-131.529-107.006-238.535-238.533-238.535z"
                                    fill="#1296db" p-id="3048"></path>
                                <path
                                    d="M513.123 149.007c-12.861 0-23.285-10.426-23.285-23.285v-91.359c0-12.861 10.426-23.285 23.285-23.285s23.285 10.426 23.285 23.285v91.358c0 12.862-10.426 23.286-23.285 23.286z"
                                    fill="#1296db" p-id="3049"></path>
                                <path
                                    d="M513.123 1010.674c-12.861 0-23.285-10.426-23.285-23.285v-91.346c0-12.861 10.426-23.285 23.285-23.285s23.285 10.426 23.285 23.285v91.346c0 12.861-10.426 23.285-23.285 23.285z"
                                    fill="#1296db" p-id="3050"></path>
                                <path
                                    d="M240.764 261.825c-5.959 0-11.919-2.274-16.466-6.821l-64.592-64.591c-9.094-9.093-9.094-23.838 0-32.931 9.093-9.094 23.838-9.094 32.931 0l64.593 64.592c9.094 9.093 9.094 23.838 0 32.931-4.546 4.545-10.507 6.82-16.467 6.82z"
                                    fill="#1296db" p-id="3051"></path>
                                <path
                                    d="M850.050 871.111c-5.958 0-11.919-2.272-16.467-6.82l-64.593-64.593c-9.093-9.094-9.093-23.839 0-32.932 9.094-9.094 23.839-9.094 32.932 0l64.593 64.593c9.093 9.094 9.093 23.839 0 32.932-4.546 4.545-10.507 6.82-16.466 6.82z"
                                    fill="#1296db" p-id="3052"></path>
                                <path
                                    d="M36.59 534.183c-12.861 0.001-23.286-10.423-23.289-23.283-0.001-12.861 10.423-23.286 23.283-23.289l91.348-0.011c12.861-0.001 23.286 10.423 23.289 23.283 0.001 12.861-10.423 23.286-23.283 23.289l-91.348 0.011z"
                                    fill="#1296db" p-id="3053"></path>
                                <path
                                    d="M989.613 534.173h-91.346c-12.861 0-23.285-10.426-23.285-23.285s10.426-23.285 23.285-23.285h91.346c12.861 0 23.285 10.426 23.285 23.285s-10.426 23.285-23.285 23.285z"
                                    fill="#1296db" p-id="3054"></path>
                                <path
                                    d="M176.173 871.122c-5.959 0-11.919-2.272-16.466-6.82-9.094-9.094-9.094-23.839 0-32.932l64.593-64.593c9.094-9.094 23.838-9.094 32.931 0s9.094 23.839 0 32.932l-64.593 64.593c-4.546 4.546-10.506 6.82-16.466 6.82z"
                                    fill="#1296db" p-id="3055"></path>
                                <path
                                    d="M785.457 261.825c-5.959 0-11.918-2.272-16.467-6.821-9.094-9.094-9.093-23.838 0.001-32.931l64.593-64.592c9.094-9.093 23.838-9.094 32.931 0s9.093 23.838-0.001 32.931l-64.593 64.592c-4.545 4.546-10.506 6.821-16.465 6.821z"
                                    fill="#1296db" p-id="3056"></path>
                            </svg><span>下午号源</span>
                        </div>
                        <div class="doc_info" v-for="doctor in afterArr" :key="doctor.id">
                            <!-- 展示医生名字和技能 -->
                            <div class="left">
                                <div class="info">
                                    <span>{{ doctor.title }}</span>
                                    <span>|</span>
                                    <span>{{ doctor.docname }}</span>
                                </div>
                                <div class="skill">
                                    <span>{{ doctor.skill }}</span>
                                </div>
                            </div>
                            <!-- 右侧展示挂号和钱数 -->
                            <div class="right">
                                <div class="money">${{ doctor.amount }}</div>
                                <el-button type="primary" size="default" @click="goStep2(doctor)">{{ doctor.availableNumber }}个名额</el-button>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

        </div>
    </div>
</template>

<script setup lang="ts">
import { reqHospitalWork, reqHospitalDoctor } from '@/api/hospital';
import { onMounted, ref, computed } from 'vue';
import type { HospitalWorkDate, DoctorResponseData, DocArr, Doctor } from '@/api/hospital/type'
import { useRoute, useRouter } from 'vue-router';
// 获取路由器
let $router = useRouter()
// 获取路由对象
let $route = useRoute()
// 分液器当前页码
let pageNo = ref<number>(1)
// 分页器展示几条数
let limit = ref<number>(6)
// 储存医院科室挂号的数据
let workDate = ref<any>({})
// 储存排班日期：当前数据的第一个
let workTime: any = ref({});
// 存储排版医生的的数据
let docArr = ref<DocArr>([])
// 组件挂载完毕发一次请求
onMounted(() => {
    fetchWorkData()

})

// 获取挂号数据
const fetchWorkData = async () => {
    const result: HospitalWorkDate = await reqHospitalWork(pageNo.value, limit.value, $route.query.hoscode as string, $route.query.depcode as string)   
    if (result.code == 200) {
        workDate.value = result.data
        // 存储第一天的数据
        workTime.value = workDate.value.bookingScheduleList[0]
        // 获取医生的数据
        getDoctorWorkData()
    }

}
// 获取医生某一天排班的数据
const getDoctorWorkData = async () => {
    // 医院的编号
    let hoscode: string = $route.query.hoscode as string
    // 科室的编号
    let depcode: string = $route.query.depcode as string
    // 时间
    let workDate: string = workTime.value.workDate
    const result: DoctorResponseData = await reqHospitalDoctor(hoscode, depcode, workDate)


    if (result.code == 200) {
        docArr.value = result.data
    }

}

// 点击顶部某一天的时候触发回调
const changeTime = (item: any) => {
    // 用户存储选择的那一天
    workTime.value = item
    // 再次发生一次获取医生排班的信息
    getDoctorWorkData()

}
// 计算输出上午排班的医生数据
let morningArr = computed(() => {

    return docArr.value.filter((doc: Doctor) => {
        return doc.workTime == 0
    })
})
// 计算输出下午排班的医生数据
let afterArr = computed(() => {

    return docArr.value.filter((doc: Doctor) => {
        return doc.workTime == 1
    })
})
// 路由跳转进入到就诊人员界面
const goStep2 = (doctor:Doctor)=>{
    // 跳转到step2 并携带医生的id
    $router.push({path:'/hospital/register_step2',query:{docId:doctor.id}})
    
}

</script>

<style scoped lang="scss">
.wrap {
    margin-top: 30px;

    .top {
        display: flex;
        color: rgb(87, 87, 87);
        font-size: 14px;

        .line {
            width: 1px;
            height: 15px;
            background-color: rgb(87, 87, 87);
            margin: 0 5px;
        }

        .dot {
            margin: 0 10px;
            color: rgb(87, 87, 87);
        }

    }

    .center {
        margin: 20px 0;
        display: flex;
        flex-direction: column;
        align-items: center;

        .time {
            font-weight: bold;
        }

        .container {
            display: flex;
            width: 100%;
            margin: 30px 0;

            .item {
                flex: 1;
                border: 1px solid #7f7f7f;
                margin: 0 10px;
                transition: all .2s;

                &.active {
                    border: 1px solid #ccc;
                    color: #7f7f7f;

                    .top1 {
                        background-color: #ccc;
                    }

                }

                &.cur {
                    transform: scale(1.1)
                }

                .top1 {
                    background-color: #e8f2ff;
                    width: 100%;
                    text-align: center;
                    line-height: 30px;
                }

                .bottom {
                    width: 100%;
                    text-align: center;
                    line-height: 60px;
                }
            }
        }
    }

    .docbottom {
        .will {
            text-align: center;
            font-size: 25px;
            font-weight: bold;
            color: #1296db;
        }

        .doc {

            .mor {
                .tips {
                    font-weight: bold;
                    display: flex;
                    align-items: center;
                }

                .doc_info {
                    display: flex;
                    justify-content: space-between;
                    margin: 10px 0;
                    border-bottom: 1px solid #ccc;

                    .left {
                        .info {
                            color: skyblue;
                            margin: 10px 0;

                            span {
                                margin: 0 5px;
                                font-size: 18px;
                                font-weight: bold;
                            }

                        }

                        .skill {
                            margin: 10px 0;
                            color: #7f7f7f;
                        }

                    }

                    .right {
                        width: 150px;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        .money {
                            color: #7f7f7f;
                            font-weight: 900;
                        }
                    }
                }

            }

            .aft {
                font-weight: bold;
                display: flex;
                align-items: center;

            }
        }
    }
}
</style>